<template>
  <div class="common-manage">
    <el-row class="toolbar">
      <el-col :span="2">
        <!-- 放导入的按钮 -->
        <el-upload
          class="upload-demo"
          :action="uploadUrl"
          :file-list="fileList"
          :show-file-list="false"
          accept=".xls,.xlsx"
          @on-success="onSuccess"
          @on-error="onError"
          @on-progress="onProgress"
        >
          <el-button icon="el-icon-upload">导入</el-button>
        </el-upload>
      </el-col>
      <el-col :span="2">
        <el-button @click="dialogVisible = true">添加</el-button>
      </el-col>
      <el-col :span="2">
        <a style="line-height: 50px" :href="fileUrl">下载模板</a>
      </el-col>
      <el-col :span="6" :offset="12">
        <!-- 放搜索框 -->
        <search-box></search-box>
      </el-col>
    </el-row>

    <el-row class="table">
      <el-col :span="24">
        <!-- 放表格 -->
        <common-table
          :cp="cp"
          :table="table"
          :tableData="tableData"
          :formTemplate="formTemplate"
        ></common-table>
      </el-col>
    </el-row>
    <el-dialog title="添加" :visible.sync="dialogVisible" width="30%">
      <common-form :formTemplate="formTemplate" :form="form"> </common-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onClick">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import CommonTable from "./CommonTable.vue";
import SearchBox from "./SearchBox.vue";
import CommonForm from "./CommonForm";
import { Message } from "element-ui";
import { register } from "@/services/auth";
/**
 * 问题，逻辑不清晰
 * 优秀的就是我就是给你所有数据，然后其他我不管，你就把那个具有搜索，分页的表格给我看
 */
export default {
  name: "CommonManage",
  props: ["tableData", "table", "formTemplate", "cp", "fileUrl", "uploadUrl"],
  components: {
    SearchBox,
    CommonTable,
    CommonForm,
  },
  data() {
    return {
      fileList: [],
      dialogVisible: false,
      form: {},
    };
  },
  methods: {
    onSuccess() {
      Message.success("上传成功");
      this.loading.close();
      // loading.close();
    },
    onError() {
      Message.error("上传失败");
      this.loading.close();
      // loading.close();
    },
    onProgress() {
      this.loading = this.$loading({
        lock: true,
        text: "正在上传",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
    },
    onClick() {
      // TODO:可能需要根据传入的表单结构进行注册
      const username = this.form.name;
      const password = this.form.password;
      // 前端校验
      if (username.length == 0 || password.length == 0) {
        alert("请输入信息");
        return;
      }
      register(username, password);
    },
  },
};
</script>

<style lang="less" scoped>
.common-manage {
  .toolbar {
    height: 50px;
  }
}
</style>